<template>
  <div id="opinion">
    <h1>意见反馈</h1>
    <div class="opinion_box">
      <ul class="opinion_left">
        <li v-for="(item,index) of messageList" :key="index">
          <img :src="item.userImg">
          <div class="opinion_user_info">{{item.userMessage}}</div>
        </li>
      </ul>
      <div class="opinion_right">
        <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="textarea">
        </el-input>
        <el-button type="primary" @click="subjectMessage">发布留言</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Opinion",
  data() {
    return {
      textarea: '',
      messageList:[
        {
          userImg:"https://tupian.qqw21.com/article/UploadPic/2020-5/202053023174232567.jpg",
          userMessage:"书籍的介绍太少，希望后期系统可以加强页面的内容"
        },
        {
          userImg:"https://p.qqan.com/up/2018-4/2018041711105148417.jpg",
          userMessage:"班主任陈老师告诉我们，原定后天下午看电影，改为今天下午。所以，我大约要在5点半才能回家。请爸爸、妈妈放心。"
        },
        {
          userImg:"https://tse3-mm.cn.bing.net/th/id/OIP-C.YEHFKYV_1kljPd6QzNTxaAAAAA?pid=ImgDet&rs=1",
          userMessage:"班主任陈老师告诉我们，原定后天下午看电影，改为今天下午。所以，我大约要在5点半才能回家。请爸爸、妈妈放心。"
        },
        {
          userImg:"https://p.qqan.com/up/2018-5/2018050911304322378.jpg",
          userMessage:"班主任陈老师告诉我们，原定后天下午看电影，改为今天下午。所以，我大约要在5点半才能回家。请爸爸、妈妈放心。"
        },
        {
          userImg:"https://tupian.qqw21.com/article/UploadPic/2020-8/202083122434425106.jpg",
          userMessage:"班主任陈老师告诉我们，原定后天下午看电影，改为今天下午。所以，我大约要在5点半才能回家。请爸爸、妈妈放心。"
        },
        {
          userImg:"https://tupian.qqw21.com/article/UploadPic/2021-3/202132318494635807.jpg",
          userMessage:"班主任陈老师告诉我们，原定后天下午看电影，改为今天下午。所以，我大约要在5点半才能回家。请爸爸、妈妈放心。"
        },
        {
          userImg:"https://p.qqan.com/up/2020-7/2020070908330733988.jpg",
          userMessage:"班主任陈老师告诉我们，原定后天下午看电影，改为今天下午。所以，我大约要在5点半才能回家。请爸爸、妈妈放心。"
        },
      ],

    }
  },
  methods:{
    //提交留言
    subjectMessage(){
      const newMessage={};
      const userImg=localStorage.getItem("jin_book_pro_user_img");
      if (userImg){
        newMessage.userImg=userImg;
        newMessage.userMessage=this.textarea;
        this.messageList.push(newMessage);
      }else{
        this.$message.error('抱歉！您为登陆，请先登录！');
      }

    }
  }
}
</script>

<style scoped>
#opinion{
  position: relative;
  width: 90%;
  margin: 20px auto;
}
#opinion h1{
  font-family: 苏新诗柳楷简;
  line-height: 50px;
  text-align: center;
}
.opinion_box{
  display: flex;
}
.opinion_left{
  border-right: 2px solid #eeeeee;
  padding: 0 20px;
  height: calc(100vh - 140px);
  overflow: auto;
}
.opinion_left li{
  display: flex;
  margin: 20px auto;
}
.opinion_left li img{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.opinion_user_info{
  height: 100px;
  padding: 0 20px;
  margin-left: 20px;
  max-width: 700px;
  font-size: 18px;
  font-weight: 100;
  line-height: 50px;
  text-indent: 2em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.opinion_right{
  flex: 1;
  padding: 20px 30px;

}
.opinion_right{
}
.opinion_right button{
  display: block;
  margin: 20px auto;
}
</style>
